.ski-dragger {
  position: relative;
  cursor: pointer;
  display: block;
  &::before {
    // 用于扩大鼠标悬停的面积，否则相对位置的触发按钮不能显示
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -16px;
    left: -16px;
    z-index: -1;
    padding: 16px;
    box-sizing: content-box; // 防止父元素以及祖先元素设置了border-box
  }
  &:hover {
    .ski-dragger-holder,
    .ski-dragger-dotted {
      visibility: visible;
      opacity: 1;
    }
  }
  &.move {
    .ski-dragger-holder,
    .ski-dragger-dotted {
      visibility: visible;
      opacity: 1;
    }
  }
  &.animate {
    transition: transform 0.3s linear;
  }

  .ski-dragger-dotted {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .ski-dragger-dotted.left {
    left: -8px;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px dashed #fff;
  }
  .ski-dragger-dotted.right {
    right: -8px;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px dashed #fff;
  }
  .ski-dragger-dotted.top {
    left: 0;
    top: -8px;
    width: 100%;
    height: 0;
    border-top: 1px dashed #fff;
  }
  .ski-dragger-dotted.bottom {
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 0;
    border-top: 1px dashed #fff;
  }
  .ski-dragger-holder {
    width: 16px;
    height: 16px;
    background-color: #fff;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .ski-dragger-holder.top-left {
    left: -16px;
    top: -16px;
    cursor: se-resize;
  }
  .ski-dragger-holder.top-center {
    left: 50%;
    transform: translateX(-50%);
    top: -16px;
    cursor: s-resize;
  }
  .ski-dragger-holder.top-right {
    right: -16px;
    top: -16px;
    cursor: ne-resize;
  }
  .ski-dragger-holder.bottom-left {
    left: -16px;
    bottom: -16px;
    cursor: ne-resize;
  }
  .ski-dragger-holder.bottom-center {
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    cursor: s-resize;
  }
  .ski-dragger-holder.bottom-right {
    right: -16px;
    bottom: -16px;
    cursor: se-resize;
  }
  .ski-dragger-holder.left-center {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: e-resize;
  }
  .ski-dragger-holder.right-center {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: e-resize;
  }
  .ski-dragger-body {
    width: 100%;
    height: 100%;
  }
}
